UI|UX/사이트유형16 사이트유형 - 배너유형2 배너 유형2 이번 배너유형은 position을 이용해 이미지 파일의 구간을 설정했습니다. 1.HTML 코드 코드 보기 배너 영역 오늘은 좋아! 오늘날씨는 너무 좋아요! 제블로그!. 구독과 좋아요! 부탁드립니다. 바로가기 2.CSS 코드 코드 보기 /* fonts */ @import url("https://webfontworld.github.io/gmarket/GmarketSans.css"); .gmark { font-family: "GmarketSans"; font-weight: 500; } /* reset */ * { margin: 0; padding: 0; } a { text-decoration: none; color: #000; } img { width: 100%; } h1, h2, h3, h4, .. 2022. 9. 29. 사이트유형 - 완성본 사이트 유형 완성본 원본 소스 보기 원본 사이트 보기 이번 사이트 유형은 css를 따로 나누어서 썻습니다. 따라서 소스보기를 통해 보시면 감사합니다. 사이트 유형 반응형 목업 원본 소스 보기 원본 사이트 보기 2022. 9. 19. 사이트유형 - 슬라이드 슬라이드 유형 슬라이드 유형은 이미지가 움직입니다. 1.HTML 코드 코드 보기 슬라이드영역 밤 하늘 별빛 하늘 밤의 별빛들을 보면 차분해 지는 느낌이 들어요. 여러분의 밤하늘을 찍어주세요. 자세히 보기 사이트 보기 이전 이미지 다음 이미지 1 2 3 플레이 정지 2.CSS 코드 코드 보기 .slider { position: relative; } .slider__img { background: url(../img/slider_bg01.jpg) no-repeat center / cover; } .slider__img .desc { width: 1160px; margin: 0 auto; padding: 100px 20px; } .slider__img .desc span { font-size: 16px; ba.. 2022. 9. 6. 사이트유형 - 배너 배너 유형 배너 유형은 이미지가 제일 큽니다. 1.HTML 코드 코드 보기 배너 영역 은하수 지구(태양계)에서 관측하는 우리 은하의 단면의 모습이다. syumay.tistory.com 배너 유형01 2.CSS 코드 코드 보기 .banner__inner { background-image: url(../img/banner_bg01.jpg); background-repeat: no-repeat; background-position: center; background-size: cover; text-align: center; padding: 120px 0; color: #fff; } .banner__inner .title { font-size: 50px; line-height: 1; font-weight: 30.. 2022. 9. 6. 사이트유형 - 푸터 푸터 유형 푸터 유형은 사이트 하단에 장식합니다. 1.HTML 코드 코드 보기 푸터 영역 사이트 웹표준 사이트 반응형 사이트 페럴럭스 사이트 포트폴리오 사이트 사이트 웹표준 사이트 반응형 사이트 페럴럭스 사이트 포트폴리오 사이트 헤더 영역 메뉴 유형01 메뉴 유형02 슬아이드 영역 슬라이드 유형01 슬라이드 유형02 이미지 영역 이미지 유형01 이미지 유형02 이미지/텍스트 유형01 이미지/텍스트 유형02 텍스트 유형01 컨텐츠 영역 카드 유형01 카드 유형02 카드 유형03 푸터 영역 푸터 메뉴 유형01 푸터 컨텍트 유형02 푸터 이메일 유형03 2022 Syumay. Portfolio is Power All rights reserved. 2.CSS 코드 코드 보기 @import url("https:/.. 2022. 9. 6. 사이트유형 | 이미지-텍스트 유형 사이트 유형 | 이미지 텍스트유형 이미지 텍스트유형은 이미지 유형과 텍스트 유형을 합친것입니다. 1.HTML 코드 코드 보기 유용한 사이트 살펴보기 이미지 텍스트 유형01 유용한 사이트 살펴보기 웹디자이너, 웹 퍼블리셔, 프론트엔드 개발자를 위한 유용한 사이트입니다. 튜토리얼 사이트 레퍼런스 사이트 웹폰트 사이트 CSS 사이트 WebGL 사이트 Youtube 사이트 레퍼런스 사이트 튜토리얼 사이트 2.CSS 코드 코드 보기 /* fonts */ @import url('https://webfontworld.github.io/NexonLv1Gothic/NexonLv1Gothic.css') .nexon { font-family: 'NexonLv1Gothic'; font-weight: 400; /* reset .. 2022. 9. 1. 이전 1 2 3 다음 728x90 반응형
